<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Chapter 9. 一个完整的例子</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <meta name="generator" content="DocBook XSL Stylesheets V1.73.2" />
    <link rel="start" href="index.html" title="Clutter编程" />
    <link rel="up" href="index.html" title="Clutter编程" />
    <link rel="prev" href="behaviour-example.html" title="示例" />
    <link rel="next" href="appendix-implementing-actors.html" title="Appendix A. Implementing Actors" />
  </head>
  <body>
    <div class="navheader">
      <table width="100%" summary="Navigation header">
        <tr>
          <th colspan="3" align="center">Chapter 9. 一个完整的例子</th>
        </tr>
        <tr>
          <td width="20%" align="left"><a accesskey="p" href="behaviour-example.html"><img src="../icons/prev.png" alt="Prev" /></a> </td>
          <th width="60%" align="center"> </th>
          <td width="20%" align="right"> <a accesskey="n" href="appendix-implementing-actors.html"><img src="../icons/next.png" alt="Next" /></a></td>
        </tr>
      </table>
      <hr />
    </div>
    <div class="chapter" lang="en" xml:lang="en">
      <div class="titlepage">
        <div>
          <div>
            <h2 class="title"><a id="sec-full-example"></a>Chapter 9. 一个完整的例子</h2>
          </div>
        </div>
      </div>
      <p>
这个例子从一个目录中装入若干图片，它们沿着椭圆形轨迹旋转。点击一张图片可把它移到最前面。当最前面的图片旋转一周后，它会不断变大并向上移动，同时文件路径显示在窗口上方。
</p>
      <p>
这个例子要比前面讲的例子复杂，有多条时间线和多个 behaviour 作用于多个 actor。
然而，它仍然是个相对简单的例子。一个真正的应用将会更灵活、具有更多的功能。
</p>
      <p>
简单来讲，这个例子的实现思路如下所示：
</p>
      <div class="itemizedlist">
        <ul type="disc">
          <li>
            <p>有两条时间线，一是旋转，二是移动，后者在前者完成后开始，这在前者的 complete 信号处理函数中实现；</p>
          </li>
          <li>
            <p>每张图是个 actor，每个 actor 都有自己的 behaviour；</p>
          </li>
          <li>
            <p>在第一条时间线中，所有 actor 的 behaviour 都是 ellipse 类型，根据 actor 的前后位置设置好各自的起始和中止角度；</p>
          </li>
          <li>
            <p>在第二条时间线中，仅仅设置最前面 actor 的 behaviour ，其类型是 path 和 scale；</p>
          </li>
          <li>
            <p>每个 actor 都支持 press event 事件，用于响应鼠标按下。</p>
          </li>
        </ul>
      </div>
      <p>
</p>
      <p>
TODO: 让这个例子更漂亮。使用容器实现。
</p>
      <div class="figure">
        <a id="figure-full-example"></a>
        <p class="title">
          <b>Figure 9.1. Full Example</b>
        </p>
        <div class="figure-contents">
          <div class="screenshot">
            <div>
              <img src="./figures/full_example.png" alt="Full Example" />
            </div>
          </div>
        </div>
      </div>
      <br class="figure-break" />
      <p>
        <a class="ulink" href="./examples/full_example" target="_top">Source Code</a>
      </p>
    </div>
    <div class="navfooter">
      <hr />
      <table width="100%" summary="Navigation footer">
        <tr>
          <td width="40%" align="left"><a accesskey="p" href="behaviour-example.html"><img src="../icons/prev.png" alt="Prev" /></a> </td>
          <td width="20%" align="center"> </td>
          <td width="40%" align="right"> <a accesskey="n" href="appendix-implementing-actors.html"><img src="../icons/next.png" alt="Next" /></a></td>
        </tr>
        <tr>
          <td width="40%" align="left" valign="top">示例 </td>
          <td width="20%" align="center">
            <a accesskey="h" href="index.html">
              <img src="../icons/home.png" alt="Home" />
            </a>
          </td>
          <td width="40%" align="right" valign="top"> Appendix A. Implementing Actors</td>
        </tr>
      </table>
    </div>
  </body>
</html>
